<template>
  <div>
    <div style="clear: both; overflow: hidden">
      <vuedraggable :value="imgData" @update="dragAndUpdate">
        <div
          class="goods_pic_item_box"
          v-for="(pic, picIndex) of imgData"
          :key="pic.id"
          :style="`width:${boxWidth}px;height:${boxWidth}px;`"
        >
          <div class="upload-img-box">
            <img :src="pic.pic_url" alt="" v-if="pic.pic_url" />
            <img :src="pic" alt="" v-else />
            <div class="action-hover">
              <div class="hover-bg"></div>
              <div class="hover-body">
                <div class="action-icons">
                  <a-icon @click="previewPic(pic.pic_url)" v-if="pic.pic_url" type="eye" />
                  <a-icon @click="previewPic(pic)" v-else type="eye" />
                  <a-icon @click="delPic(picIndex)" v-if="!disabled" type="delete" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </vuedraggable>
      <template v-if="!hasApply">
        <div
          class="upload-box"
          :style="`width:${boxWidth}px;height:${boxWidth}px;`"
          v-if="showUpload"
          @click="$refs.chooseImg.onClickUploadBtn()"
        >
          <div class="upload-content">
            <a-icon :style="{ fontSize: iconSize + 'px', color: 'rgba(0, 0, 0, 0.45)' }" type="plus" />
            <span>{{ uploadText }}</span>
          </div>
        </div>
      </template>
    </div>

    <p
      style="
        margin: 10px 0 0 0;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.45);
      "
      v-if="showSize"
    >
      建议尺寸：{{ imgSizeText }}
    </p>

    <a-modal
      :visible="showPreviwModal"
      @ok="
        () => {
          showPreviwModal = fasle
        }
      "
      @cancel="
        () => {
          showPreviwModal = fasle
        }
      "
    >
      <div style="display: flex; justify-content: center">
        <img style="width: 300px" :src="previewImgSrc" alt="" />
      </div>
    </a-modal>
    <storage-select
      placeholder="请选择图片"
      :hiddenInput="true"
      ref="chooseImg"
      selectNum="5"
      @onOk="selectPic"
    ></storage-select>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import {guid} from '@/utils/utils'
export default {
  components: {
    vuedraggable,
  },
  props: {
    hasApply: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    dataType: {
      type: String,
      default: '', // list
    },
    imgSrc: {
      type: String,
      default: '',
    },
    imgList: {
      type: Array,
      default: [],
    },
    imgSizeText: {
      type: String,
      default: '750*750',
    },
    showSize: {
      type: Boolean,
      default: true,
    },
    iconSize: {
      type: [String, Number],
      default: '36',
    },
    uploadText: {
      type: String,
      default: '上传图片',
    },
    boxWidth: {
      type: [String, Number],
      default: '104',
    },
  },
  data() {
    return {
      previewImgSrc: '', // 预览图片链接
      showPreviwModal: false, // 预览弹框显示
    }
  },
  created() {},
  computed: {
    imgData() {
      if (this.dataType != 'list') {
        if (this.imgSrc) {
          return [
            {
              id: guid(),
              pic_url: this.imgSrc,
            },
          ]
        } else {
          return []
        }
      } else {
        return this.imgList.map((item) => {
          return {
            id: guid(),
            pic_url: typeof item == 'string' ? item: item.pic_url,
          }
        })
      }
    },
    showUpload() {
      if (this.dataType != 'list') {
        if (!this.imgSrc) {
          return true
        } else {
          return false
        }
      } else {
        return true
      }
    },
  },
  mounted() {},
  methods: {
    // 拖拽完成
    dragAndUpdate({ oldIndex, newIndex }) {
      let imgList = JSON.parse(JSON.stringify(this.imgList))
      let oldItem = imgList[oldIndex]
      // 数据往前移动
      if (oldIndex > newIndex) {
        imgList.splice(newIndex, 0, oldItem)
        imgList.splice(oldIndex + 1, 1)
      } else {
        imgList.splice(oldIndex, 1)
        imgList.splice(newIndex, 0, oldItem)
      }
      this.$emit('change', imgList)
      this.$emit('update:imgList',imgList)
    },
    //   预览图片
    previewPic(src) {
      this.previewImgSrc = src
      this.showPreviwModal = true
    },
    // 删除图片
    delPic(picIndex) {
      this.$emit('deleteImg', { index: picIndex })
    },
    // 上传图片回调
    selectPic(cbImgList) {
      console.log(cbImgList)
      let params = {
        data: null,
      }
      params.data = this.dataType == 'list' ? cbImgList : cbImgList[0]

      this.$emit('uploadSuccess', params)
    },
  },
}
</script>
<style lang="less" scoped>
.goods_pic_item_box {
  box-shadow: 0 0 5px rgba(170, 170, 170, 0.671);
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  float: left;
  margin: 0 8px 8px 0px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  .upload-img-box {
    width: 100%;
    height: 100%;
    position: relative;
    .action-hover {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
      display: none;
      opacity: 0;
      transition: all 0.3s;

      .hover-bg {
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: 0.4;
      }
      .hover-body {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 11;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .action-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        .anticon {
          color: #ffffff;
          font-size: 17px;
        }
        .anticon:nth-child(1) {
          margin-right: 10px;
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .upload-img-box:hover > .action-hover {
    display: block;
    opacity: 1;
  }
}
.upload-box {
  background: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  cursor: pointer;
  .upload-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .self-com {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 111;
    /deep/.ant-btn {
      width: 100%;
      height: 100%;
    }
    /deep/.ant-input-group-wrapper {
      width: 100%;
      height: 100%;
      .ant-input-group {
        width: 100%;
        height: 100%;
        span:nth-child(1) {
          display: none;
        }
        span:nth-child(3) {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
}
</style>
